<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Padding-Top - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">padding-top</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b>
    [<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b class="s">IE4B2</b>|<b><i class="fs">N4B2</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]<br></td>
    <td colspan=2 align=center><b class="alert">Other Padding Properties</b><br></td>
</tr>
<tr>
    <td><a href="padding.htm">padding</a><br>
    <a href="paddingright.htm">padding-right</a><br></td>
    <td><a href="paddingbot.htm">padding-bottom</a><br>
    <a href="paddingleft.htm">padding-left</a><br></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0 >
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td><b class="alert">0</b></td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>ALL</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>No</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>Visual</td></tr>
<tr><th align=left><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>NA</td></tr>
<tr><th align=left valign=top><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS1#padding-top">CSS1: Sect. 5.5.6</a><br>
        <a href="http://www.w3.org/TR/REC-CSS2/box.html#padding-properties">CSS2: Sect. 8.4</a>,
        <a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">CSS2.1: Sect. 8.4</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>This property controls the size of the top padding of an element's
        rendering box. Negative values are not allowed.
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">N6</i></b>|<b class="s">O7</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">[length]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b class="s">IE4B2</b>|<b><i class="fs">N4B2</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Refers to either an absolute measurement or a relative measurement based on the
        current element's font size.</dd>

<dt><b class="subheading">[percentage]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b class="s">IE4B2</b>|<b><i class="fs">N4B3</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Calculated</dd>
    <dd><b class="l3heading">Description:</b><br>
        Refers to a percentage of the width of the current element's containing block.</dd>
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="selector">blockquote</b> {
        <span class="property">padding-top:</span> 3em }</div>
    <dd><div class="example">In-Line:&#160; &lt;<b class="tagname">blockquote</b>
        <span class="tagattrib">STYLE</span>=&quot;<span
        class="property">padding-top:</span>
        3em&quot;&gt;This is a test document&lt;/<b class="tagname">blockquote</b>&gt;</div>
</dl>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li><b class="alert">Internet Explorer</b>
        <dl>
        <dd><b class="alert2">4.0:</b>
        <dd>- Of the various form field types, Padding properties are only applied to
            button widgets (Input Type=Submit|Reset|Button.)
        <dd>- Padding applied to TABLE elements applies to the individual cells, not
            the table structure.
        <dd><b class="alert2">4.0+:</b>
        <dd>- Using Padding properties on a form button widget
            (Input Type=Submit|Reset|Button) applies the padding inside the button,
            not outside the button.
        <dd>- Padding properties do not apply to images
        <dd><b class="alert2">4.0-5.0:</b>
        <dd>- This property does not apply to inline elements.
        <dd><b class="alert2">5.0+:</b>
        <dd>- Padding applied to TABLE elements has <em>SOME</em> effect on cell
            content, but it is difficult to identify patterns to the behavior.
        <dd>- Padding now applies to text entry fields as well (Input
            Type="File|Text", Textarea), but as with button widgets, the padding
            is applied inside the field, not outside it.
        <dd><b class="alert2">5.5+:</b>
        <dd>- Beginning in 5.5 Beta 1, this property now applies to inline elements.
        </dl>
    <li><b class="alert">Netscape</b>
        <dl>
        <dd><b class="alert2">4.x:</b>
        <dd>- Positive padding values on inline elements appears to be very broken
            (negative or zero values are ignored.) I am sure there is probably a rational
            heuristic at work deciding what to do with the content, but in most cases the
            result is badly overlapping content. Stay away from this in Netscape.
        <dd>- Applying padding values to a replaced object (my test was an IMG element)
            really messes with document content flow.
        <dd>- Padding applied to individual List Items (LI) causes the list marker
            to NOT be rendered. If applied to a list structure (OL, UL, etc) the list
            markers are rendered.
        <dd>- Padding applied to TABLE elements applies to the individual cells, not the table structure.
        <dd>- Some situations involving padding properties can cause extra line feeds when printing.
        </dl>
    <li><b class="alert">Opera</b>
        <dl>
        <dd><b class="alert2">3.5:</b>
        <dd>- Padding is not applied to replaced items (IMG, form field widgets, etc.)
        <dd>- Padding-top and Padding-bottom values are ignored for inline elements
           (EM, STRONG, SPAN, etc.) Only Padding-left and Padding-right values
           are honored for spacing. The surface color for the padding, however,
        <em>DOES</em> cover any specified Padding-top and Padding-bottom values.
        <dd>- Padding applied to TABLE elements has odd effects. No effect on TD/TH.
        </dl>
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>